import React, { useState } from 'react'
import { Form, InputNumber, Tooltip } from 'antd'
import { FormInstance } from 'antd/es/form/Form'
import IconSvg from '@/components/IconSvg'
import styles from './index.module.less'
import { IVariableSort, IVariableItem } from '@/@types/common'

interface IProps {
  variableList: IVariableSort[]
  formObj: FormInstance
  readonly?: boolean
}

export default (props: IProps) => {
  const { variableList, formObj, readonly } = props
  // 当前聚焦的变量展示的注释
  const [focusVariable, setFocusVariable] = useState<IVariableItem>()
  return (
    <div className={styles.variableWrapper}>
      <div className={styles.variableLeft}>
        <Form form={formObj} disabled={readonly}>
          {variableList.map((item) => (
            <div className={styles.sortItem} key={item.id}>
              <div className={styles.sortHeader}>
                <div className={styles.sortName}>{item.sortName}</div>
              </div>
              <div className={styles.variableBox}>
                {item.variablePlatformVos?.map((variableItem) => (
                  <div className={styles.variableItem} key={variableItem.id}>
                    <Tooltip title={variableItem.variableName}>
                      <p
                        className={`${styles.variableHeader} ${Number(variableItem.isEmpty) === 0 ? styles.must : ''}`}
                      >
                        {variableItem.variableName}
                      </p>
                    </Tooltip>
                    <Form.Item
                      name={variableItem.id}
                      rules={[
                        { required: Number(variableItem.isEmpty) === 0, message: `请输入${variableItem.variableName}` },
                      ]}
                    >
                      <InputNumber
                        controls={false}
                        onFocus={() => setFocusVariable(variableItem)}
                        style={{ width: '266px' }}
                        min={variableItem.variableMin}
                        max={variableItem.variableMax}
                        precision={Number(variableItem.decimalPlace)}
                      />
                    </Form.Item>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </Form>
      </div>
      {!readonly && variableList.length > 0 && (
        <div className={styles.variableRight}>
          <div className={styles.header}>
            <IconSvg style={{ marginRight: '4px' }} name='explain' />
            变量解释
          </div>
          <div className={styles.explain}>
            {focusVariable && (
              <>
                <p style={{ marginBottom: '16px' }}>"{focusVariable?.variableName}"解释说明</p>
                <div className={styles.explainContent}>
                  <span>定义:</span>
                  <div className={styles.explainTxt}>
                    <div>{focusVariable?.variableAnnotation}</div>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  )
}
